本章正式进入项目页面开发环节，将带大家完整的实现项目中的首页，涵括的功能点包含组件拆分、导航栏引入、banner 轮播、跳转等难点的讲解。

# 去除顶部标题栏

首先看页面布局，页面部分可以分为2个小块：轮播图，歌单滑动等小块。

以上图作为 UI 设计稿，我们需要做的是完善页面内容，开发代码以上一节的架构代码为基础，调试以浏览器为优先。

Uniapp 默认情况下在 h5 端的是有 title 标题栏的，如果需要去掉就要在配置文件进行设置，这是未改之前的图片：

当前开发的音乐应用是不需要标题栏的，找到项目的根目录下的 pages.json 文件，添加一下内容，可以去掉对应页面的导航栏，设置 app-plus 的 titleNView 为 false 即可；

/* pages.json */

"pages": [
    {
     "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "发现",
            "app-plus":{
                "titleNView": false
            }
        }
    }
]

而且作为首页（启动的第一个页面），这个页面需要在 pages 数组中放在第一位，项目在启动的时候就会以此作为第一个启动页。

# 首页 banner 轮播（swiper组件使用）

这样的 banner 轮播图交互可以选择 swiper 组件来完成，配置查看，代码：

<swiper class="swiper">
    <swiper-item>
        <view class="swiper-item">包含的内容</view>
    </swiper-item>
</swiper>

Uniapp 的 swiper 组件为滑块视图容器，可以用于左右滑动或上下滑动，比如 banner 轮播图。注意是滑动切换而不是滚动。swiper 下的每个 swiper-item 是一个滑动切换区域，不能停留在2个滑动区域之间。这样的交互效果完美契合了我们要完成的轮播图。

由 swiper 包裹 item 组件，swiper 接受配置参数，完成轮播的特效，我们要实现滑动动画时长300毫秒(duration="300")，显示面板指示点（轮播图中间的导航小点）(indicator-dots="true")，自动播放轮播图(autoplay="true")，当前选中的指示点颜色为黑色(indicator-active-color="#000")的设定：

<swiper class="swiper" indicator-dots="true"  indicator-active-color="#000" autoplay="true" interval="interval" >
    <swiper-item>
        <view class="swiper-item uni-bg-red">A</view>
    </swiper-item>
</swiper>

我们实现的是需要有圆角的 banner 轮播图，对每个 item 项目设置样式即可。

我们只是书写了样式，怎么让数据对应呢？

# 完成数据请求与数据绑定

跟后台交互的时候，我们需要请求后台数据，Uniapp 有自己封装好的